<template>
  <div class="goods_wrap" v-loading="goodInfoLoading">
    <div class="btn-group">
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
    <h2 class="h_title">商品信息</h2>
    <el-form
      ref="form"
      :model="goodInfoForm"
      label-width="80px"
      class="par_basic"
    >
      <el-form-item label="商品名称">
        <el-input v-model="goodInfoForm.good_name"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="goodInfoForm.price"></el-input>
      </el-form-item>
      <el-form-item label="促销价格">
        <el-input v-model="goodInfoForm.promotion_price"></el-input>
      </el-form-item>
      <el-form-item label="一级分类" class="pro_left">
        <el-select
          v-model="goodInfoForm.type_parent_id"
          placeholder="请选择"
          @change="changeType(goodInfoForm.type_parent_id)"
        >
          <el-option
            v-for="item in goodsTypeListArr1"
            :key="item.good_type_id"
            :label="item.type_name"
            :value="item.good_type_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" class="pro_left">
        <el-select v-model="goodInfoForm.type_id" placeholder="请选择">
          <el-option
            v-for="item in goodsTypeListArr2"
            :key="item.good_type_id"
            :label="item.type_name"
            :value="item.good_type_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品热卖" class="pro_left">
        <el-select v-model="goodInfoForm.is_new" placeholder="请选择">
          <el-option
            v-for="item in newMap"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品封面" class="pro_left">
        <uploadImg :url="goodInfoForm.img" @cb="setimg" :limit="1"></uploadImg>
      </el-form-item>

      <el-form-item label="商品描述">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="goodInfoForm2.info"></el-input>
      </el-form-item>
      
      <el-form-item label="商品图集" class="pro_left">
        <uploadImg :url="goodInfoForm2.imgs" @cb="setimgs" :limit="10"></uploadImg>
      </el-form-item>

      <div class="pro_left">
        <el-form-item label="商品属性"></el-form-item>
        <SPU @cb="setSPU" :SPU="goodInfoForm2.colour"></SPU>
      </div>
      
      <h2 class="h_title">SKU</h2>
      <SKU @cb="setSKU" :SKU="goodInfoForm2.edition"></SKU>
    </el-form>

    <div class="btn-groups">
      <el-button type="info" @click="goBack">取消</el-button>
      <el-button type="primary" @click="addModifyGood">提交</el-button>
    </div>
  </div>
</template>

<script>
import uploadImg from "@/common/uploadImg.vue";
import SPU from "@/common/SPU.vue";
import SKU from "@/common/SKU.vue";
import { goodInfo, goodsTypeList, addModifyGood } from "@/utils/productList.js";
export default {
  name: "",
  data() {
    return {
      goodInfoLoading: false, //加载状态
      goodInfoForm: {}, //商品信息
      goodInfoForm2: {}, //商品附加信息
      goodsTypeListArr1: [], //商品分类信息一级
      goodsTypeListArr2: [], //商品分类信息二级
      newMap: [
        {
          //热卖状态
          id: 1,
          text: "是",
        },
        {
          id: 0,
          text: "否",
        },
      ],
    };
  },

  components: {
    uploadImg,
    SPU,
    SKU
  },

  methods: {
    msgbox(msg) {
      //提示框
      this.$message.error(msg);
    },
    msgbox_succ(msg) {
      //提示框
      this.$message.success(msg);
    },
    goodInfo() {
      //获取商品详情
      if (this.$route.params.id == undefined) return; //没有id说明是添加
      this.goodInfoLoading = true;
      goodInfo({
        good_id: this.$route.params.id || "",
      })
        .then((res) => {
          this.goodInfoLoading = false;

          if (res.code !== 2000) {
            this.msgbox(this.MSG.LOAD_ERR + res.msg); //加载错误
            return;
          }
          this.goodInfoForm = res.data;
          {
            //fiexed
            this.goodInfoForm2 = res.data.info[0] || {};
            this.goodInfoForm2.info = unescape(
              this.goodInfoForm2.info.replace(/\\u/g, "%u")
            ).replace(/\"/g, ""); //unicode转汉字 issue
            this.goodInfoForm2.imgs = this.goodInfoForm2.imgs
              .replace(/\\u/g, "%u")
              .replace(/\\/g, "");
            this.goodInfoForm2.colour = unescape(
              this.goodInfoForm2.colour.replace(/\\u/g, "%u")
            );
            this.goodInfoForm2.edition = unescape(
              this.goodInfoForm2.edition.replace(/\\u/g, "%u")
            );
            this.goodInfoForm.is_new = Number(this.goodInfoForm.is_new); //解决显示问题
            this.goodInfoForm2.imgs = JSON.parse(this.goodInfoForm2.imgs);
            this.goodInfoForm2.colour = JSON.parse(this.goodInfoForm2.colour);
            this.goodInfoForm2.edition = JSON.parse(this.goodInfoForm2.edition);
          }
        })
        .catch((err) => {
          this.goodInfoLoading = false;
        });
    },
    goodsTypeList() {
      //获取商品类别
      goodsTypeList()
        .then((res) => {
          if (res.code !== 2000) {
            this.msgbox(this.MSG.LOAD_ERR_TYPE + res.msg);
            return;
          }

          this.goodsTypeListArr1 = res.data.filter(
            (e) => !e.parent_id && e.status == 1
          ); //一级
          this.goodsTypeListArr2 = res.data.filter(
            (e) => e.parent_id && e.status == 1
          ); //二级
          this.goodsTypeListArr1.map(
            (e) =>
              (e.children = this.goodsTypeListArr2.filter(
                (el) => el.parent_id == e.good_type_id
              ))
          );
        })
        .catch((err) => {});
    },
    changeType(val) {
      //两级分类联动
      this.goodsTypeListArr1.map((e) => {
        if (e.good_type_id == val) {
          this.goodsTypeListArr2 = e.children;
          this.goodInfoForm.type_id = this.goodsTypeListArr2[0].good_type_id;
        }
      });
    },
    setimg(val) {//上传图片封面
      this.goodInfoForm.img = val.map((e) => e.url)[0];
    },
    setimgs(val) {//上传商品图集
      this.goodInfoForm2.imgs = val.map((e) => e.url);
    },
    goBack() {
      this.$router.go(-1);
    },
    addModifyGood() {
      var params = Object.assign({}, this.goodInfoForm, this.goodInfoForm2);
      this.goodInfoLoading = true;
      addModifyGood(params)
        .then((res) => {
          this.$router.push({ path: "/productList" });
          this.goodInfoLoading = false;
          if (res.code !== 2000) {
            this.msgbox(this.MSG.UPLOAD_ERR + res.msg);
            return;
          }
          this.msgbox_succ(this.MSG.UPLOAD_SUCC + res.msg);
        })
        .catch((err) => {
          this.goodInfoLoading = false;
        });
    },
    setSPU(spu) {
      this.goodInfoForm2.colour = spu // JSON.stringify(spu);
    },
    setSKU(sku) {
        this.goodInfoForm2.edition = sku //JSON.stringify(sku);
    },
  },
  mounted() {
    async function loadData(_this) {
      await _this.goodInfo();
      await _this.goodsTypeList();
    }
    loadData(this);
  },
};
</script>

<style scoped>
.goods_wrap {
  width: 100%;
  height: 100%;
  padding: 30px;
  background-color: #fff;
  border: 1px solid#cc945c;
  box-sizing: border-box;
}
.btn-group {
  text-align: left;
}
.par_basic {
  width: 80%;
  margin: 0 auto;
}
.h_title {
  padding: 10px;
  margin: 30px 0px;
  border-radius: 4px;
  /* background-image: linear-gradient(to right, #cc945c 0%, #ffffff 100%); */
  color: #cc945c;
  /* background-color: rgba(204, 148, 92, 0.1); */
}
.pro_left {
  text-align: left;
}
.btn-groups {
  margin-top: 30px;
  text-align: center;
}
</style>